<template>
    <div>
        <yd-scrolltab v-if="contacts && contacts.length > 0">
            <yd-scrolltab-panel v-for="dept in contacts" :label="dept.name" :key="dept.name" icon="yd-icon-type">
                <yd-cell-group>
                    <yd-cell-item v-for="user in dept.users" :key="user.user_id" @click.native="showDetail(user)">
                        <div slot="icon" class="avatarBox">
                            <img :src="user.user_image ? user.user_image : 'assets/img/default/staff.png'" />
                        </div>
                        <div slot="left" class="avatarDesc">
                            <span class="username">{{ user.user_name }}</span><br/>
                            <span class="userdesc">{{ user.user_desc }}</span>
                        </div>
                        <!--
                        <span slot="right" class="itemvalue">{{ user.user_phone }}</span>
                        -->
                    </yd-cell-item>
                </yd-cell-group>
            </yd-scrolltab-panel>
        </yd-scrolltab>
        <div v-else>
            <p class="prompt">
                <span>没有搜索到联系人 {{ searchText }}</span>
            </p>
        </div>

        <yd-popup v-model="showUser" position="bottom" height="40%">
            <ui-contact :contact="userInfo"></ui-contact>
        </yd-popup>
    </div>
</template>

<script>
module.exports = {
    data () {
        return {
            showUser: false,
            userInfo: {},
            searchText: undefined
        }
    },
    created () {
        this.$store.dispatch("getContacts", () => {
            this.$store.commit('webar', {
                show: 'search',
                handleSearch: this.handleSearch
            })
        })
    },
    computed: {
        contacts () {
            const list = this.searchText ? _.filter(this.$store.getters.contactsList.list, (item) => {
                    if(item.user_name.indexOf(this.searchText) >= 0 ||
                        item.user_desc.indexOf(this.searchText) >= 0) {
                        return item
                    }
            }) : this.$store.getters.contactsList.list
            return _.map(
                _.groupBy(list, 'user_dept'),
                (item, prop) => {
                    return {name: prop, users: item}
                }
            )
        }
    },
    methods: {
        showDetail (user) {
            this.showUser = true
            this.userInfo = user
        },
        handleSearch (text) {
            this.searchText = text
        }
    }
}
</script>

<style scoped>
.avatarBox {
    float: left;
    display: block;
    margin: .2rem;
    width: 1rem;
    height: 1rem;
    box-shadow: 0 0 .1rem 0px rgba(0, 0, 0, 0.3);
    border-radius: .1rem;
}
.avatarBox img {
    width: 1rem;
    height: 1rem;
    border-radius: .1rem;
}
.avatarDesc {
    padding-top: .3rem;
}
.itemvalue {
    padding-left: .2rem;
    font-size: .28rem;
    color: #000;
    -webkit-transform:scale(1,1.6);
    -moz-transform:scale(1,1.6);
}
.userBox {
    height: 1.4rem;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 100;
    background-color: #fff;
    box-shadow: 0 0 .1rem 0px rgba(0, 0, 0, 0.3);
}
.listBox {
    margin-left: 1.4rem;
    margin-top: 1.4rem;
}
.username {
    padding-left: .4rem;
    font-weight: bold;
    font-size: .38rem;
    color: #000;
}
.userdesc {
    padding-left: .4rem;
    font-size: .28rem;
    color: #cfcfcf;
}
    .prompt {
        margin: .1rem 0;
        text-align: center;
    }
    .prompt > span {
            display: inline-block;
            padding: 0 .18rem;
            font-size: .12rem;
            color: #fff;
            border-radius: .1rem;
            background-color: #dcdcdc;
        }
.yd-scrolltab-active {
    box-shadow: 0 0 .1rem 0px rgba(0, 0, 0, 0.3);
}
.yd-scrolltab-nav {
    width: 2.02rem;
}
.yd-scrolltab-icon {
    display: none;
}
.yd-scrolltab-title {
    font-size: .28rem;
}
</style>
